<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>人脸识别Demo</title>
</head>
<body style="text-align: center"
	background="image/background.jpeg">
	<div>
		<button style="width: 480px; height: 50px; font-size: 150%"
			id="capture">请将面部对准摄像头后，点此按钮识别</button>
	</div>
	<div>
		<button style="width: 480px; height: 50px; font-size: 150%"
			id="register">若无法识别，填入用户id，点此按钮注册</button>
	</div>
	<div>
		<input style="width: 480px; height: 50px; font-size: 150%"
			placeholder="在此输入用户id" id="username">
	</div>
	<video id="video" width="480" height="320" controls> </video>
	</br>
	<canvas id="canvas" width="480" height="320"></canvas>

	<script>
	    //访问用户媒体设备的兼容方法
	    function getUserMedia(constraints, success, error) {
	      if (navigator.mediaDevices.getUserMedia) {
	        //最新的标准API
	        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
	      } else if (navigator.webkitGetUserMedia) {
	        //webkit核心浏览器
	        navigator.webkitGetUserMedia(constraints,success, error)
	      } else if (navigator.mozGetUserMedia) {
	        //firfox浏览器
	        navigator.mozGetUserMedia(constraints, success, error);
	      } else if (navigator.getUserMedia) {
	        //旧版API
	        navigator.getUserMedia(constraints, success, error);
	      }
	    }
	
	    let video = document.getElementById('video');
	    let canvas = document.getElementById('canvas');
	    let context = canvas.getContext('2d');
	
	    function success(stream) {
	      //兼容webkit核心浏览器
	      let CompatibleURL = window.URL || window.webkitURL;
	      //将视频流设置为video元素的源
	      console.log(stream);
	
	      //video.src = CompatibleURL.createObjectURL(stream);
	      video.srcObject = stream;
	      video.play();
	    }
	
	    function error(error) {
	      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
	    }
	
	    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
	      //调用用户媒体设备, 访问摄像头
	      getUserMedia({video : {width: 480, height: 320}}, success, error);
	    } else {
	      alert('不支持访问用户媒体');
	    }
	
	    document.getElementById('capture').addEventListener('click', function () {
	    context.drawImage(video, 0, 0, 480, 320);   
	    var imgData = canvas.toDataURL();
	    console.log(base64Data);
	    //将图片转换为Base64
	    var base64Data = imgData.substr(22);
	    console.log(base64Data);
	    context.clearRect(0,0,480,320);
	    showCustomer(base64Data,"default");
	    }); 
	    
	    document.getElementById('register').addEventListener('click', function () {
	        context.drawImage(video, 0, 0, 480, 320);   
	        var imgData = canvas.toDataURL();
	        console.log(base64Data);
	        //将图片转换为Base64
	        var base64Data = imgData.substr(22);
	        console.log(base64Data);
	        context.clearRect(0,0,480,320);
	        var username = document.getElementById("username").value;
	        showCustomer(base64Data,username);
	    }); 
	    
	    function showCustomer(image,username)
	    {
	      var xmlhttp;    
	      if (window.XMLHttpRequest)
	      {
	        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	        xmlhttp=new XMLHttpRequest();
	      }
	      else
	      {
	        // IE6, IE5 浏览器执行代码
	        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      xmlhttp.onreadystatechange=function()
	      {
	        if (xmlhttp.readyState==4 && xmlhttp.status==200)
	        {
	          var result = xmlhttp.responseText;
	          var jsonObj = JSON.parse( result );
	          if(jsonObj.recName != "undefined" && jsonObj.recName != null && jsonObj.recName != ""){
	        	  alert(jsonObj.recName);
	          }else{
	        	  if (username == "default"){
	        		  alert("不认识你是谁");
	        	  }else{
	        		  alert("注册成功");
	        	  }
	          }
	        }
	      }
	      xmlhttp.open("POST","../calculate",true);
	      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
	      xmlhttp.send("image="+encodeURIComponent(image)+"&name="+username);
	    }
  </script>
</body>
</html>